import React, { Component } from "react";
import { View, Animated, Easing, TouchableOpacity } from "react-native";
import { createStyles } from "../../../utils/index";

const styles = createStyles({
  root: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#666699",
  },
  item: {
    width: "98%",
    height: 50,
    backgroundColor: "#66CCFF",
    marginBottom: 10,

    // borderStyle: 'solid',
    borderRadius: 8,
    justifyContent: "center",
    paddingLeft: 8,
  },
  text: {
    fontSize: 16,
  },
  circle: {
    backgroundColor: "#0069FF",
    borderRadius: 600,
  },
});

class Demo10 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalWidth: new Animated.Value(48), // 弹窗初始宽度
      modalHeight: new Animated.Value(48), // 弹窗初始高度
      modalOpacity: new Animated.Value(10), // 透明度
    };
  }

  startAnimated = () => {
    const { modalHeight, modalWidth, modalOpacity } = this.state;
    modalHeight.setValue(48);
    modalHeight.setValue(48);
    modalOpacity.setValue(10);
    // 同步执行的动画
    const animationSlider = Animated.parallel([
      Animated.timing(modalHeight, {
        toValue: 300,
        duration: 2000,
        easing: Easing.linear,
      }),
      Animated.timing(modalWidth, {
        toValue: 300,
        duration: 2000,
        easing: Easing.linear,
      }),
      Animated.timing(modalOpacity, {
        toValue: 0,
        duration: 2000,
        easing: Easing.in,
      }),

      // Animated.decay(modalOpacity, {
      //   velocity: 10,
      //   toValue: 1,
      //   duration: 2000,
      //   deceleration: 0.8,
      // }),
      // 可以添加其他动画
    ]);
    Animated.loop(animationSlider).start();
    // .start(
    // ({ finished }) => {
    // 这里可以添加动画之后要执行的函数
    // setTimeout(() => {
    //   this.setState({ isModalVisible: false });
    // }, 100);
    // if (finished) {
    //   this.startAnimation();
    // }
    // }
    // );
  };

  render() {
    const { modalHeight, modalWidth, modalOpacity } = this.state;

    return (
      <View
        style={{
          flex: 1,
          alignItems: "center",
          justifyContent: "center",
          height: "100%",
        }}
      >
        <TouchableOpacity
          style={{ marginTop: 20, padding: 10, alignItems: "center" }}
          onPress={this.startAnimated}
        >
          <Animated.View
            style={[
              styles.circle,
              {
                height: modalHeight,
                width: modalWidth,
                opacity: modalOpacity.interpolate({
                  inputRange: [1, 5, 10],
                  outputRange: [0.1, 0.5, 1],
                }),
                backgroundColor: modalOpacity.interpolate({
                  inputRange: [5, 10],
                  outputRange: ["#66CCFF00", "#0069FFFF"],
                }),
              },
            ]}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

export default Demo10;
